<script setup lang='ts'>
import { appRef } from '@/models/app.ref';
import { Message } from '@arco-design/web-vue';
import { onMounted, ref } from 'vue';
import Sider from '@/components/chat/Sider.vue'
import Interactive from '@/components/chat/Interactive.vue'
import Explanation from '@/components/Explanation.vue'
import { fileService } from '@/services/file.service';
import { ChatFileMenuInfo } from '@/models/chat-file';
import { SiderMenuEnum } from '@/models/@types';
import { oneDayTimestamp } from '@/utils/common.data';

const menus = ref([]);
const currMenu = ref({} as ChatFileMenuInfo);
onMounted(() => {
  init();
})

function init(): void {
  menus.value = appRef.chatFile.menus;
  currMenu.value = appRef.chatFile?.currMenu;
}

function onAdd(e: { type: SiderMenuEnum, parent?: string }): void {
  const { type, parent } = e
  appRef.chatFile.add(type, parent);
  init();
}

function onItem(uid: string): void {
  console.log('onItem', uid);
  appRef.chatFile.setCurrKey(uid);
  init();
}
function onEdit(param: { uid: string, label: string }): void {
  const { uid, label } = param;
  appRef.chatFile.edit(uid, label);
}

const isUploadLading = ref(false);
/** 上传文档 */
function beforeUpload(file: File): boolean {
  if (!currMenu.value.uid) return false;
  const { type, size } = file;
  if (!(type === "text/plain" || type === "application/pdf")) {
    Message.error('只能上传 txt 或 pdf 格式的文件');
    return false;
  }
  if (size > 1024 * 1024 * 10) {
    Message.error('只能上传小于 10M 的文件');
    return false;
  }
  isUploadLading.value = true;
  return true;
}

function uploadsuccess(file: any): void {
  const { response } = file;
  isUploadLading.value = false;
  appRef.chatFile.updatedFile(currMenu.value.uid, response.filename);
  isExpire.value = false;
  isSend.value = false;
}

const isSend = ref(false);
const isExpire = ref(false);  // 文件过期   
function sendMessage(textarea: string): void {
  isSend.value = true;
  fileService.send(currMenu.value.fileUid, textarea).then(() => {
    isSend.value = false;
  }).catch(err => {
    console.log(err);
    isExpire.value = true;
  });
}

function onRefresh(quote: string): void {
  isSend.value = true;
  fileService.refreshSend(currMenu.value.fileUid, quote).then(() => {
    isSend.value = false;
  });
}


</script>
<template>
  <div class="index">
    <a-layout style="height: 100%;">
      <Sider :menus="menus" :default-uid="currMenu?.uid" @add="onAdd" @clear="() => { appRef.chatFile.clear(); init() }"
        @click-item="onItem" @edit="($event) => { onEdit($event); init() }"
        @remove="($event) => { appRef.chatFile.remove($event); init() }" />
      <a-layout>
        <div class="main flex-c" v-if="currMenu?.uid">
          <Interactive :sessions="currMenu.sessions" v-if="currMenu?.fileUid" v-model:isSend="isSend" :isrefresh="true"
            @send="sendMessage" @refresh="onRefresh" @remove="appRef.chatFile.removeMenuAnswer($event)">
            <template #select-model v-if="isExpire">
              <a-upload tip="文件过期，请重新上传" action="https://www.cwjiaoyu.cn/fileApi/share/upload_file/" :limit="1"
                accept=".pdf,.txt" @before-upload="beforeUpload" @success="uploadsuccess"
                @error="isUploadLading = false" />
            </template>
          </Interactive>
          <div class="upload" v-else>
            <p v-show="isUploadLading" style="margin-bottom: 17px;font-size: 17px;"><icon-loading
                style="margin-right: 10px;" />疯狂上传中 ...</p>
            <a-upload action="https://www.cwjiaoyu.cn/fileApi/share/upload_file/" :limit="1" draggable accept=".pdf,.txt"
              @before-upload="beforeUpload" @success="uploadsuccess" @error="isUploadLading = false" />
          </div>
        </div>
        <Explanation v-else />
      </a-layout>
    </a-layout>
  </div>
</template>
<style lang='scss' scoped>
.index {
  height: 100%;

  .main {
    justify-content: center;

    .upload {
      width: 100%;
      max-width: 500px;
    }
  }


}
</style>